<template>
    <div>
        <div class="myheader">
            <el-input
                v-model="listQuery.risk_category"
                placeholder="风险源类别"
                style="width: 200px;left: 10px;"
                class="filter-item"
                @keyup.enter.native="handleFilter"
            />

            <el-button
                v-waves
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
            >搜索</el-button>
            <el-button
                class="filter-item"
                style="margin-left: 10px;"
                type="primary"
                icon="el-icon-edit"
                @click="handleCreate"
            >创建风险源类别</el-button>
        </div>

        <el-table :data="tableData" border fit style="margin:0px auto;;width: 98.5%">
            <el-table-column align="center" prop="id" label="id" width="50" />
            <el-table-column align="center" prop="station_name" label="站点名" />
            <el-table-column align="center" prop="risk_category" label="风险源类别" />
            <el-table-column align="center" prop="risk_description" label="具体风险描述" />
            <el-table-column align="center" prop="risk_duration" label="风险预计持续时段" />
            <el-table-column align="center" prop="risk_grade" label="风险等级" />
            <el-table-column align="center" prop="supervisor" label="监理控制设施" />
            <el-table-column align="center" prop="supervisor_person" label="监理责任人" />
            <el-table-column align="center" prop="supervisor_phone" label="监理责任人电话" />
            <el-table-column align="center" prop="construction" label="施工控制设施" />
            <el-table-column align="center" prop="construction_person" label="施工责任人" />
            <el-table-column align="center" prop="construction_phone" label="施工责任人电话" />

            <el-table-column
                label="操作"
                align="center"
                width="230"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
                    <el-button
                        v-if="row.status!='deleted'"
                        size="mini"
                        type="danger"
                        @click="del_address(row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.pageNo"
            :limit.sync="listQuery.pageSize"
            @pagination="getTableData"
        />

        <el-dialog :visible.sync="dialogPvVisible" :title="dialogStatus=='create'?'添加风险源类别':'修改风险源类别'">
            <el-form
                ref="dataForm"
                :rules="rules"
                :model="temp"
                label-position="left"
                label-width="100px"
                style="width: 400px; margin-left:50px;"
            >
                <!-- <el-form-item label=" 风险源类别id" prop="staff_id">
          <el-input v-model="temp.staff_id" />
                </el-form-item>-->
                <el-form-item v-show="showzd" label="站点">
                    <el-select
                        v-model="temp.station_id"
                        filterable
                        placeholder="请选择"
                        style="float:left"
                    >
                        <el-option
                            v-for="item in options1"
                            :key="item.id"
                            :label="item.station_name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>

              
                <el-form-item label=" 风险源类别" prop="risk_category">
                    <el-input v-model="temp.risk_category" />
                </el-form-item>
                

                <el-form-item label="具体风险描述" prop="risk_description">
                    <el-input v-model="temp.risk_description" />
                </el-form-item>
                <el-form-item label="风险预计持续时段" prop="risk_duration">
                    <el-input v-model="temp.risk_duration" />
                </el-form-item>
                

                <el-form-item label="风险等级" prop="risk_grade">
                    <el-input v-model="temp.risk_grade" />
                </el-form-item>
                <el-form-item label="监理控制设施" prop="supervisor">
                    <el-input v-model="temp.supervisor" />
                </el-form-item>
                <el-form-item label="监理责任人" prop="supervisor_person">
                    <el-input v-model="temp.supervisor_person" />
                </el-form-item>
                <el-form-item label="监理责任人电话" prop="supervisor_phone">
                    <el-input v-model="temp.supervisor_phone" />
                </el-form-item>
                <el-form-item label="施工控制设施" prop="construction">
                    <el-input v-model="temp.construction" />
                </el-form-item>
                <el-form-item label="施工责任人" prop="construction_person">
                    <el-input v-model="temp.construction_person" />
                </el-form-item>
                <el-form-item label="施工责任人电话" prop="construction_phone">
                    <el-input v-model="temp.construction_phone" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogPvVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="btnloading"
                    @click="dialogStatus==='create'?createData():updateData()"
                >确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },

    methods: {
        getList($event) {
            console.log(this.temp.sub_id);
            let me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            ajax('worktype/SelectWorktype', { sub_id: this.temp.sub_id, section_id: me.temp.section_id }, function(data) {
                me.options3 = data;
            });
        },
        getTableData4() {
            let me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            ajax('subcontractors/SelectSubcontractors', { section_id: me.temp.section_id }, function(data) {
                me.options2 = data;
            });
        },
        getTableData3() {
            let me = this;
            me.temp.section_id = localStorage.getItem('section_id');
            ajax('station/SelectStation', { section_id: me.temp.section_id }, function(data) {
                me.options1 = data;
            });
        },

        getTableData1() {
            // let me = this;
            // ajax('behavior/select_behavior', {}, function(data) {
            //     me.options = data;
            //     // console.log(data);
            // });
        },

        getList() {
            var me = this;
            ajax('risk/FindRisk', this.listQuery, function(data) {
                me.tableData = data.items;
                me.total = data.total;
                me.listQuery.pageNo = data.pageNo;
                me.listQuery.pageSize = data.pageSize;
            });
        },
        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },
        handleUpdate(row) {
            this.dialogStatus = 'update';
            
            this.showzd=false;
            this.dialogPvVisible = true;
            this.temp = Object.assign({}, row); // copy obj
            // 当更改data中数据后，得到更新后的DOM
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate();
            });
        },
        del_address(row) {
            var me = this;
            this.$confirm('永久删除该部门, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    ajax('risk/DeleteRisk', { id: row.id }, function(data) {
                        if (data == 1) {
                            me.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            me.getTableData();
                        } else {
                            me.$message({
                                type: 'success',
                                message: '删除失败!'
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        resetTemp() {
            this.temp = {
                risk_grade: '',
                staff_id: '',
                id: '',
                station_id: '',
                behavior_id: '',
                uptime: '',
                staff_card: ''
            };
        },
        getTableData() {
            var me = this;
            me.listQuery.section_id = localStorage.getItem('section_id');
            ajax('risk/FindRisk', this.listQuery, function(data) {
                me.dialogPvVisible = false;
                me.tableData = data.items;
                me.total = data.total;
                me.listQuery.pageNo = data.pageNo;
                me.listQuery.pageSize = data.pageSize;
            });
        },
        updateData() {
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                    var me = this;
                    this.btnloading = true;
                    ajax('risk/UpdateRisk', this.temp, function(data) {
                        me.getTableData();
                        me.dialogPvVisible = false;
                        me.btnloading = false;
                        me.$message({
                            title: '成功',
                            message: '修改成功',
                            type: 'success',
                            duration: 2000
                        });
                        me.resetTemp();
                    });
                }
            });
        },
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        createData() {
            
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                    var me = this;
                    this.btnloading = true;
                    me.temp.section_id = localStorage.getItem('section_id');
                    ajax('risk/InsertRisk', this.temp, function(data) {
                        me.getTableData();
                        me.dialogPvVisible = false;
                        me.btnloading = false;
                        me.$message({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        });
                    });
                }
            });
        },
        handleCreate() {
            this.dialogStatus = 'create';
            this.dialogPvVisible = true;
            this.showzd=true;
            this.resetTemp();
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate(); //清除验证
            });
        }
    },

    data() {
        return {
            showzd:true,
            options3: [],
            options2: [],
            options1: [],
            options: [],
            listQuery: {
                pageNo: 1,
                pageSize: 10,
                staff_id: '',
                section_id: ''
            },
            total: 100,
            rules: {
                img_url: [{ required: true, message: '照片不能为空！', trigger: 'blur' }],
                nation: [{ required: true, message: '民族不能为空！', trigger: 'blur' }],
                behavior_id: [{ required: true, message: '行为id不能为空！', trigger: 'blur' }],

                staff_id: [{ required: true, message: '行为类型不能为空！', trigger: 'blur' }],
                departmentname: [{ required: true, message: '部门不能为空！', trigger: 'blur' }],
                phone: [{ required: true, message: '手机号不能为空！', trigger: 'blur' }],
                integral: [{ required: true, message: '积分不能为空！', trigger: 'blur' }],
                name: [{ required: true, message: '姓名不能为空！', trigger: 'blur' }],
                sos_phone: [{ required: true, message: '紧急联系人行为id不能为空！', trigger: 'blur' }],
                worktypename: [{ required: true, message: '风险源类别不能为空！', trigger: 'blur' }],
                createtime: [{ required: true, message: '入职时间不能为空！', trigger: 'blur' }],
                name: [{ required: true, message: '姓名不能为空！', trigger: 'blur' }],
                address: [{ required: true, message: '行为id地址不能为空！', trigger: 'blur' }],
                id: [{ required: true, message: 'id不能为空！', trigger: 'blur' }]
            },
            temp: {
                risk_grade: '',
                staff_id: '',
                behavior_id: '',
                id: '',
                station_id: '',
                section_id: '',
                uptime: '',
                risk_category: '',
                staff_card: ''
            },
            dialogStatus: 'create',
            dialogPvVisible: false,
            tableData: [],
            btnloading: false
        };
    },
    created() {
        var me = this;
        me.getTableData();
        me.getList();
        me.getTableData1();
        me.getTableData4();
        me.getTableData3();
    }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.pic >>> .el-upload--text {
    width: 180px;
}
</style>